<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
<div id="container"></div>
</body>
<script src="./node_modules/three/build/three.js"></script>

<script>
    const scene = new THREE.Scene() // 创建一个新的场景

    const geometry = new THREE.BoxGeometry(100, 100, 100) // 创建一个立方体几何体
    // 创建一个材质对象Material
    const material = new THREE.MeshBasicMaterial({
        color: 0xff0000, // 设置材质颜色为红色
    });

    // 创建一个网格模型对象mesh
    const mesh = new THREE.Mesh(geometry, material)
    mesh.position.set(0, 10, 0) // 设置网格模型的位置
    scene.add(mesh) // 将网格模型添加到场景中

    // 实例化一个透视投影相机对象
    const camera = new THREE.PerspectiveCamera()

    // 相机在Three.js三维坐标系中的位置
    camera.position.set(200, 200, 200)

    // 相机观察目标指向Three.js 3D空间中的某个位置
    camera.lookAt(0, 0, 0) // 相机指向坐标原点
    camera.lookAt(0, 0, 0) // 相机指向y轴上位置10
    camera.lookAt(mesh.position) // 相机指向mesh对应的位置

    // 定义相机输出画布的尺寸（单位：像素px）
    const width = 600
    const height = 600

    // 创建渲染器对象
    const renderer = new THREE.WebGLRenderer()

    // 设置 three.js 渲染区域的尺寸
    renderer.setSize(width, height)
    renderer.render(scene, camera) // 渲染场景和相机

    // 将渲染器的DOM元素添加到body中
    document.body.appendChild(renderer.domElement)

    // 将渲染器的DOM元素添加到id为container的元素中
    document.getElementById('container').appendChild(renderer.domElement);


</script>

</html>
